iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 6

Vue Directives 常用的內建指令

  • 分享至 

  • xImage
  •  

通關密碼就是這些了,記熟了就通行無阻。

Vue 除了有我們先前介紹的{{ 雙花括號 }}之外,還有許多由v-為前綴的特殊屬性指令(Directives),這些放在 HTML 標籤裡的屬性,就如同 HTML 標籤裡一部分的屬性依ㄧ樣,這些指令會因表達式的值改變時,也將會自動的響應在 DOM 上,而改變屬性與 DOM 的渲染。

官方對於指令(Directives)的寫法是:「指令的職責是,當表達式的值改變時,將其產生的連帶影響,響應式地作用於 DOM。」

我們先來看看ㄧ部分常用的指令(Directives),接下來會透過範例一一介紹這些指令的用法。

指令 作用
v-if 如果為 true, 當前標籤才會輸出到頁面
v-html 更新元素的 innerHTML
v-else 如果為 false, 當前標籤才會輸出到頁面
v-show 通過控制 display 樣式來控制顯示/隱藏
v-for 遍歷陣列/物件
v:text 更新元素的 textContent
v-on 綁定事件監聽, 一般簡寫為@
v-bind 強制綁定解析表達式, 可以省略 v-bind
v-model 雙向資料綁定
ref 為某個元素註冊一個唯一標識, vue 物件通過 $refs 屬性訪問這個元素物件
v-cloak 使用它防止閃現表達式, 與 css 配合: [v-cloak] { display: none }

v-text

v-text的主要用途是在 html 的標籤裡設定這個標籤的文字內容(textContent)。雖然很方便使用,但缺點是,無論標籤裡有無內容,一律都會被v-text替換掉。他雖然也可寫表達式,但默認的寫法還是會替換掉標籤內的「所有」內容。

如果想在標籤裡隨意加上內容,可使用插值表達式的雙花括號{{ message}},因為如果內容有變更,也只有雙花括號裡的內容會被替換,使用上會比較靈活。雙花括號也可加入邏輯,例如拼接{{ message + "in" +city}}

在底下的範例裡,如果我們使用v-text來綁定<h2>標籤的內容,會發現<h2 v-text="message">XXX</h2>裡的xxx內容會被覆蓋掉,而只顯示相對應的message Bonjour。

<div id="app">
<h2 v-text="message">XXX</h2>
<h2> Tracy say: {{ message }}
</div>
const app = new Vue({
  el: '#app',
  data: {
    message: 'Bonjour',
    city: 'Paris',
  },
});

v-html

v-html用來設定如同標籤的innerHTML,專門用來在網頁中加入 html 結構內容,例如想在<p>放入一個連結,必須是 HTML 語法,就可以使用 v-html 輕鬆辦到。也就是說使用v-html時會自動被解析成 HTML 標籤,和v-textv-html不同的是v-text只會被解析成純文字。

<div id="app">
  <p v-html="content"></p>
</div>
const app = new Vue({
  el: '#app',
  data: {
    content: '<a href="#"> Paris</a>',
  },
});

v-on

為元素綁定事件,並且可以以@替代v-on:,所綁定的方法需要定義在methods屬性中,在方法裡要取得Data裡的資料需使用this各個關鍵字取得。

在觸發的元素上加上觸發方式和綁定的方法:
<input type="button" value="事件綁定" v-on:觸發事件名稱="方法" />
這些觸發事件的方法有許多種,但是和原生的 JS 寫法不同,例如原本的onclick 寫成click,因為在v-on的指令已經有on,所以只要將原生名稱去掉on就可以囉。

<div id="app">
  <!-- 點擊 -->
  <input type="button" value="showAlert" v-on:click="方法" />
  <!-- 滑鼠移至元素上方 -->
  <input type="button" value="showAlert" v-on:mouseover="方法" />
  <!-- 點擊兩次 -->
  <input type="button" value="showAlert" v-on:dblclick="方法" />
  <input type="button" value="showAlert" @click="方法" />
  <h3 @click="addName">Je suis {{name}}</h3>
</div>
const app = new Vue({
  el: '#app',
  data: {
    name: 'Tracy',
    content: '<a href="#"> Paris</a>',
  },
  methods: {
    showAlert: function () {
      return alert('Bonjour !');
    },
    showMsg: function () {
      // let msg = this.message
      // console.log(msg)
      return alert(this.message);
    },
    addName: function () {
      // 還會連帶改變原本的name...
      this.name += 'et moi';
    },
  },
});

參考:
模板語法 — Vue.js 指令

每日一句法文有益身心:À bientôt ! 啊.ㄅㄧㄤ ˋ.兜! 下次(很快)見!


上一篇
Vue 實例介紹
下一篇
Vue.js 簡單實作計數器
系列文
Déjà-vu ? 要 Vue 過才知道30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言